<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../s/vue/2.7.16/vue.min.js"></script>
</head>
<body oncontextmenu="return false;">
	<h3>组件</h3>
	<hr>
	<div id="example">
		<div is="my-component"></div>
	</div>
	<script>
		document.oncontextmenu = function() {
			return false
		}
		Vue.component('my-component', {
			template : '<div>A custom component!</div>'
		});
		// 创建根实例
		new Vue({
			el : '#example'
		});
	</script>
	<hr>
	<div id="example-2">
		<button is="simple-counter"></button>
		<button is="simple-counter"></button>
		<button is="simple-counter"></button>
	</div>
	<script>
		(function() {
			var data = {
				counter : 0
			}
			Vue.component('simple-counter', {
				template : '<button v-on:click="counter += 1">{{ counter }}</button>',
				// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
				// 但是我们返回给每个组件的实例的却引用了同一个data对象
				data : function() {
					return data
				}
			});
		})();
		new Vue({
			el : '#example-2'
		});
	</script>
	<hr>
	<div id="example-3">
		<button is="simple-counter"></button>
		<button is="simple-counter"></button>
		<button is="simple-counter"></button>
	</div>
	<script>
		Vue.component('simple-counter', {
			template : '<button v-on:click="counter += 1">{{ counter }}</button>',
			// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
			// 但是我们返回给每个组件的实例的却引用了同一个data对象
			data : function() {
				return {
					counter : 0
				}
			}
		});
		new Vue({
			el : '#example-3'
		});
	</script>
	<hr>
	<div id="example-4">
		<button is="button-counter" v-on:compute="computeTotal"></button>
		+
		<button is="button-counter" v-on:compute="computeTotal"></button>
		= <span>{{ total }}</span>
	</div>
	<script>
		Vue.component('button-counter', {
			template : '<button v-on:click="increment">{{ counter }}</button>',
			data : function() {
				return {
					counter : 0
				}
			},
			methods : {
				increment : function() {
					this.counter += 1
					this.$emit('compute')
				}
			},
		})
		new Vue({
			el : '#example-4',
			data : {
				total : 0
			},
			methods : {
				computeTotal : function() {
					this.total += 1
				}
			}
		})
	</script>
	<hr>
	<div id="example-5">
		<button is="increment-button"></button>
		+
		<button is="increment-button"></button>
		= <span v-text="counter"></span>
	</div>
	<script>
		new Vue({
			el : '#example-5',
			data : {
				counter : 0
			},
			methods : {
				increment : function() {
					this.counter += 1
				}
			},
			components : {
				'increment-button' : {
					template : '<button v-on:click="increment">{{ counter }}</button>',
					data : function() {
						return {
							counter : 0
						}
					},
					methods : {
						increment : function() {
							this.counter++;
							this.$parent.increment();
						}
					}
				}
			}
		});
	</script>
</body>
</html>